<template>
	<view class="account_analysis_content tn-safe-area-inset-bottom">
		<view class="top_content">
			<view class="top_title tn-flex tn-margin">
				<view class="select_year tn-flex tn-flex-col-center" @click="getTimer">
					<view class="year">{{selectYearResult}}年</view>
					<text class="down tn-icon-down-triangle"></text>
				</view>
				<view class="select_tab tn-flex tn-flex-1">
					<tn-subsection :list="recordAnalysisTypeList" animationType="cubic-bezier" buttonColor="#ffd946" :height="60" activeColor="#000" :bold="true" :fontSize="30" :current="topTabsIndex"
						@change="topTabsChange"></tn-subsection>
				</view>
			</view>

			<view class="center_summary tn-flex tn-flex-direction-column tn-margin tn-padding-left-sm">
				<view class="summary">
					<view class="title">年结余</view>
					<text class="total">{{yearSumIn - yearSumOut}}</text>
				</view>
				<view class="detail tn-margin-bottom tn-flex">
					<view class="item tn-flex tn-flex-1">
						<text class="name">年收入</text>
						<text class="value">{{yearSumIn}}</text>
					</view>
					<view class="item tn-flex tn-flex-1">
						<text class="name">年支出</text>
						<text class="value">{{yearSumOut}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_details tn-margin">
			<view class="header tn-flex">
				<view class="dim tn-flex-1">{{aliasName}}份</view>
				<view class="in tn-flex-1">{{aliasName}}收入</view>
				<view class="out tn-flex-1">{{aliasName}}支出</view>
				<view class="over tn-flex-1">{{aliasName}}结余</view>
				<view class="detail_icon"></view>
			</view>
			<view class="body">
				<view class="item tn-flex tn-border-solid-top" @click="viewDetail(item)" v-for="(item,index) in sumDataList" :key="index">
					<view class="dim tn-flex-1">{{item.date}}{{aliasName}}</view>
					<view class="in tn-flex-1">{{item.sumIn}}</view>
					<view class="out tn-flex-1">{{item.sumOut}}</view>
					<view class="over tn-flex-1">{{item.sumIn - item.sumOut}}</view>
					<view class="detail_icon">
						<text v-if="selectTimerType == 10" class="tn-icon-right"></text>
					</view>
				</view>
			</view>
		</view>
		<view class='tn-tabbar-height'></view>
		<tn-select v-model="selectTimerShow" :defaultValue="timerDefaultValue" mode="single" :searchShow="false" :list="yearList" @confirm="selectTimerConfim"></tn-select>
	</view>
</template>

<script>
	import { recordAnalysisTypes } from '@/utils/enums';
	import { sumAnalysis } from '@/api/account/analysis';
	export default {
		name: 'AccountAnalysis',
		data() {
			return {
				topTabsIndex: 0,
				selectYearResult: null,
				selectTimerType: 10,
				recordAnalysisTypeList: [],
				selectTimerShow: false,
				timerDefaultValue: [4],
				yearList: [],
				sumDataList: [],
				yearSumIn: 0,
				yearSumOut: 0,
			}
		},
		created() {
			this.initYear();
			this.getData();
			this.recordAnalysisTypeList = recordAnalysisTypes.map(item => item.name);
		},
		computed: {
			cotentStyle() {
				return {
					marginTop: `calc(40rpx + ${this.vuex_status_bar_height}px)`
				}
			},
			aliasName() {
				return recordAnalysisTypes.find(item => item.id == this.selectTimerType).alias;
			}
		},
		methods: {
			getData() {
				this.getSumAnalysis();
			},
			getSumAnalysis() {
				let entity = {
					type: this.selectTimerType,
					value: this.selectYearResult
				}
				sumAnalysis(entity).then(res => {
					this.sumDataList = res.result;
					this.yearSumIn = 0;
					this.yearSumOut = 0;
					this.sumDataList.forEach(item => {
						this.yearSumIn += item.sumIn;
						this.yearSumOut += item.sumOut;
					});
				}).finally(res => {});
			},
			initYear() {
				let newDate = new Date();
				this.selectYearResult = Number(newDate.getFullYear());
				for (var i = -4; i <= 0; i++) {
					let value = Number(newDate.getFullYear()) + i;
					let itemYear = {
						value: value,
						label: value + "年"
					};
					this.yearList.push(itemYear);
				}
			},
			getTimer() {
				this.selectTimerShow = true;
			},
			selectTimerConfim(event) {

				this.selectYearResult = event[0]['value'];
				let selectIndex = this.yearList.findIndex(item => item.value == this.selectYearResult);
				this.timerDefaultValue = [];
				this.timerDefaultValue.push(selectIndex);
				this.getData();
			},
			topTabsChange(event) {
				let selectType = recordAnalysisTypes.find(item => item.name == event.name);
				this.selectTimerType = selectType.id;
				this.getData();
			},
			viewDetail(item) {
				if (this.selectTimerType == 0) {
					return;
				}
				this.$common.navigateTo('/pages/account/analysisMonthDetail?monthDate=' + item.date)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account_analysis_content {
		max-height: 100vh;

		.bottom_details {
			margin-top:calc(420rpx  + var(--status-bar-height));
			.detail_icon {
				width: 40rpx;
				text-align: center;
			}

			.header {
				width: 100%;
				font-size: 26rpx;
				color: #a1a1a1;
				margin-bottom: 10rpx;
			}

			.body {
				width: 100%;

				.item {
					font-size: 26rpx;
					font-weight: bolder;
					font-family: 'OPPOSans B';
					padding: 30rpx 0rpx;
				}

			}
		}

		.top_content {
			height:calc(320rpx + var(--status-bar-height));
			position: fixed;
			background-color: #FFF;
			top: 0px;
			z-index:999;
			width: 100%;
			.top_title {
				width: 100%;
				margin-top:  calc(40rpx + var(--status-bar-height));
				.select_year {
					.year {
						font-size: 30rpx;
					}

					.down {
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.select_tab {
					padding-left: 60rpx;

					.tn-subsection-class {
						width: 400rpx;
					}
				}
			}

			.center_summary {
				background-color: $base-color;
				border-radius: 20rpx;
				margin-top: 50rpx;
				margin-bottom: 50rpx;

				.summary {
					margin-top: 30rpx;
					margin-bottom: 30rpx;

					.title {
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}

					.total {
						font-size: 42rpx;
						font-weight: bolder;
						font-family: 'OPPOSans B';
					}
				}

				.detail {
					.item {
						align-items: baseline;

						.name {
							font-size: 28rpx;
							margin-right: 5rpx;
						}

						.value {
							font-size: 36rpx;
							font-weight: bolder;
							font-family: 'OPPOSans B';
						}
					}
				}
			}
		}



	}
</style>